<template>
  <div>

    <file v-bind:input-id="'content-file-upload'"
          v-bind:text="'上传文件'"
          v-bind:suffixs="['jpg', 'jpeg', 'png', 'mp4']"
          v-bind:use="FILE_USE.COURSE.key"
          v-bind:after-upload="afterUploadContentFile"></file>
    <br>
    <form class="form-horizontal">
      <div class="form-group">
        <div class="col-lg-12">
          {{saveContentLabel}}
        </div>
      </div>
      <div class="form-group">
        <div class="col-lg-12">
          <div id="content"></div>
        </div>
      </div>
      <div class="form-group">
        <div class="col-lg-12">
          {{saveContentLabel}}
        </div>
      </div>
    </form>
    <p>
      <button type="button" class="btn btn-white btn-info btn-round" v-on:click="saveContent()">
        <i class="ace-icon fa fa-plus blue"></i>
        保存
      </button>&nbsp;
      <router-link to="/business/course" type="button" class="btn btn-white btn-default btn-round" data-dismiss="modal">
        <i class="ace-icon fa fa-times"></i>
        返回课程
      </router-link>
    </p>
  </div>
</template>

<script>
  // import File from "../../components/file";
import File from "@/components/file";

  export default {
    components: {File},
    name: "discusspost-content",
    data: function() {
      return {
        id:'', //课程的id
        course: {},
        FILE_USE: FILE_USE,
        saveContentLabel: "",
        saveContentInterval: {},
      }
    },
    mounted: function() {
      let _this = this;
      _this.id = _this.$route.query.id;
      _this.init();
    },
    destroyed: function() {
      let _this = this;
      console.log("组件销毁");
      clearInterval(_this.saveContentInterval);
    },
    methods: {

      /**
       * 打开内容编辑框
       */
      init() {
        let _this = this;
        let course = _this.course;
        let id = course.id;

        $("#content").summernote({
          lang : 'zh-CN',
          focus: true,
          height: 300,
          callbacks: {
            /* 图片上传回调方法,解决summernote编辑器默认上传图片保存的是base64的问题,修改后的效果等同于：
            在课程内容页面上传图片后，点击summernote编辑器的插入图片按钮，输入前面上传图片展现的url，点确认，图片会显示在编辑器内。
            即：uploadSummerNotePic()方法做了以下操作：1、上传图片到阿里云oss（简单上传，没有分片上传。有限制文件格式为['jpg', 'jpeg', 'png']，
            2、把文件记录通过afterUploadContentFile()方法保存到`course_content_file`表中，（1、2两步等同于<file>组件做的操作，代码也一样的）
            3、调用summernote编辑器的函数把url对应的图片显示在编辑器中。 */
            onImageUpload: function(files, editor, welEditable) {
              _this.uploadSummerNotePic(files[0], editor, welEditable);
            }
          }
        });

        // 先清空历史文本
        $("#content").summernote('code', '');
        _this.saveContentLabel = "";
      },

      uploadSummerNotePic(file, editor, welEditable) {
        let _this = this;

        // 判断文件格式
        let suffixs =['jpg', 'jpeg', 'png'];
        let fileName = file.name;
        let suffix = fileName.substring(fileName.lastIndexOf(".") + 1, fileName.length).toLowerCase();
        let validateSuffix = false;
        for (let i = 0; i < suffixs.length; i++) {
          if (suffixs[i].toLowerCase() === suffix) {
            validateSuffix = true;
            break;
          }
        }
        if (!validateSuffix) {
          Toast.warning("文件格式不正确！只支持上传：" + suffixs.join(","));
          return;
        }

        let formData = new window.FormData();
        formData.append('file', file);
        formData.append("use", this.FILE_USE.COURSE.key);
        Loading.show();
        _this.$ajax.post(process.env.VUE_APP_SERVER + '/file/web/oss-simple', formData).then((response)=>{
          Loading.hide();
          let resp = response.data;
          console.log("上传文件成功：", resp);
          console.log('图片路径：' + resp.content.path)
          $('#content').summernote('insertImage', resp.content.path, '插入图片');
          _this.afterUploadContentFile(resp);
        });
      },

      /**
       * 保存内容
       */
      saveContent () {
        let _this = this;
        let content = $("#content").summernote("code");
        _this.$ajax.post(process.env.VUE_APP_SERVER + '/business/admin/course/save-content', {
          id: _this.course.id,
          content: content
        }).then((response)=>{
          Loading.hide();
          let resp = response.data;
          if (resp.success) {
            // Toast.success("内容保存成功");
            let now = Tool.dateFormat("yyyy-MM-dd hh:mm:ss");
            _this.saveContentLabel = "最后保存时间：" + now;
          } else {
            Toast.warning(resp.message);
          }
        });
      },

      /**
       * 上传内容文件后，保存内容文件记录
       */
      afterUploadContentFile(response) {
        let file = response.content;
        Toast.success("上传成功。文件路径：\n"+file.path+
            "\n，文件名称："+file.name+"\n，文件大小："+file.size);
      },
    }
  }
</script>